<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            justify-content: center;
            height: 100vh;
            align-items: center;
            background-color: black;
            position: relative;
        }
        #clock {
            color: white;
            margin: auto;
            font-size: 150px;
            font-family: '华文隶书';
            text-shadow: 0px 0px 20px aqua;
        }
        #format-btn {
            font-size: 30px;
            background-color: white;
            cursor: pointer;
            position: absolute;
            right: 70px;
        }
        #format-btn:hover {
            transform: scale(1.2);
        }
        #w2 {
          font-size: 30px;
          font-weight: bold;
          position: relative;
          background-color: aliceblue;
          color: greenyellow;
          top: 20%;
          right: 50%;
        }
        #w2:hover {
          transform: scale(1.2);
        }
        #format-btn:active {
          transform: scale(1.1);
        }
        #w2:active {
          transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="clock"></div>
    <button id="format-btn" onclick="toggleFormat()">12/24小时制</button>
    <button id="w2">去下一个</button>
    </div>
  
    <script>
  let is12Hour = true
  let currentTime 
  function displayTime(time) {
    let hours = time.getHours()
    let minutes = time.getMinutes()
    let seconds = time.getSeconds()
    let timeString = formatTime(hours,minutes,seconds,is12Hour)
    document.getElementById('clock').innerHTML=timeString
  }
  function formatTime(hours,minutes,seconds,is12Hour) {
    let format = is12Hour ? (hours < 12 ? "AM" : "PM") : ""
    hours = is12Hour ? ((hours % 12) || 12) : hours
    minutes = addZero(minutes)
    seconds = addZero(seconds)
    return `${hours}:${minutes}:${seconds}${format}`
  }
  function addZero(num) {
    return (num<10) ? "0" + num : num
  }
  function toggleFormat(){
    is12Hour = !is12Hour
    displayTime(currentTime)
  }
  setInterval(()=>{
    currentTime = new Date()
    displayTime(currentTime)
  },1000)
  displayTime(new Date())

  document.getElementById('w2').addEventListener('click', function() {
    window.location.href = './计算器.html';
});
    </script>
</body>
</html>